<template>
	<view>
		<view class="body">
		<view :class="show_attr_picker || show || no_scroll ? 'no-scroll' : ''">
				<view style="padding-bottom: 120rpx">
					<!-- parse <include src="/components/goods/goods_banner.wxml"></include> -->
					<swiper :autoplay="autoplay" :circular="true" class="goods-image-swiper"
						duration="300" indicatorActiveColor="#ff5c5c" :indicatorDots="true" interval="5000">
						<swiper-item v-for="(item, index) in goods.carouselImgList" >
							<image @tap="onGoodsImageClick" class="goods-image" :data-index="index" mode="aspectFill"
								:src="item"></image>

							<image @tap="play" :class="'play ' + img_hide" :data-url="goods.video"
								src="/pages2/static/images/video-play.png" v-if="goods.video && index == 0"></image>

						<!-- 	<view class="flex-row flex-y-center share_commission"
								v-if="__user_info.is_distributor == 1 && __is_share_price && goods.max_share_price > 0 && goods.is_negotiable != 1 && goods.is_share">
								<image class="img" :src="__wxapp_img.store.share_commission.url"></image>
								<view class="flex-col text_box">
									<text class="text1">分销最高可赚</text>
									<text class="text2">￥{{ goods.max_share_price }}</text>
								</view>
							</view> -->
						</swiper-item>
					</swiper>

					<!-- parse <include src="/components/goods/goods_info.wxml"></include> -->
					<view class="goods_info_box">
						<view class="goods_name">{{ goods.name }}</view>
						<view class="flex-row flex-y-center store_goods_info">
							<view class="flex-grow-1 flex-col">
							
								<view class="flex-grow-0 flex-y-center view1">
									
									<text class="min_price">{{ goods.score }}{{money_name}}</text>
								</view>
								<view class="flex-row flex-y-center" style="margin-top: 14rpx">
									<view class="flex-grow-0 view2">
									<!-- 	<text class="original_price">
											￥{{ goods.original_price }}
										</text> -->
									</view>
									<view class="flex-grow-0 view2">
										<text class="sales">销量：</text>
										<text class="sales">{{ goods.sales }}</text>
									</view>
								</view>
							</view>
						<!-- 	<view class="flex-grow-0">
								<button @tap="showShareModal" class="share_btn" :plain="true">
									<image class="img" src="/static/images/icon-share.png"></image>
									<view class="share">分享</view>
								</button>
							</view> -->
						</view>
					</view>
					<view class="bg-white mb-20 flex-row check-list"
						v-if="goods.service_list && goods.service_list.length > 0">
						<view class="check-item flex-y-center" v-for="(item, index) in goods.service_list"
							:key="item.id">
							<image :src="item.image"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
					<view class="mb-20" v-else></view>
					<view @tap="showAttrPicker" class="flex-row flex-y-center select_attrs"
						v-if="quick != 1 && !goods.is_negotiable && __user_info.blacklist !== 1">
						<view class="flex-grow-1 flex-row flex-y-center">
							<text>选择</text>
							<text class="attrs">规格</text>
						</view>
						<view class="flex-grow-0">
							<image class="img" src="/static/images/icon-jiantou-r.png"></image>
						</view>
					</view>

					<view class="flex flex-row mch_shop" v-if="goods.mch">
						<view class="flex-grow-0 img_box">
							<image class="logo" :src="goods.mch.logo"></image>
						</view>
						<view class="flex-grow-1">
							<view class="name">{{ goods.mch.name }}</view>
							<view class="shop_info">
								<text class="goods_num">商品数量：{{ goods.mch.goods_num }}</text>
								<text v-if="__is_sales">已售：{{ goods.mch.sale_num }}</text>
							</view>
						</view>
						<view class="flex-grow-0 flex-y-center">
							<navigator class="enter_shop" openType="redirect"
								:url="'/mch/shop/shop?mch_id=' + goods.mch.id">进店逛逛</navigator>
						</view>
					</view>
					<view :class="'share-modal ' + share_modal_active">
						<view class="share-modal-body">
							<view class="flex-row">
								<view class="flex-grow-1 flex-x-center">
									<button class="share-bottom" openType="share">
										<image src="/static/images/yVAXxUWR1ulerIhb.png"></image>
										<view>分享给朋友</view>
									</button>
								</view>
								<view class="flex-grow-1 flex-x-center">
									<view @tap="getGoodsQrcode" class="share-bottom">
										<image src="/static/images/icon-share-qrcode.png"></image>
										<view>生成商品海报</view>
									</view>
								</view>
							</view>
							<view @tap="shareModalClose" class="share-modal-close flex-y-center flex-x-center">关闭</view>
						</view>
					</view>
					<view @tap="close" :class="'modal flex-row ' + hide">
						<view class="flex-y-center" style="width: 100%; height: 100%; position: relative">
							<image src="/static/images/icon-close2.png"
								style="width: 50rpx; height: 50rpx; position: absolute; left: 24rpx; top: 24rpx">
							</image>
							<video :autoplay="true" direction="" id="video" :src="url" style="height: 80%"></video>
						</view>
					</view>
					<view :class="'goods-qrcode-modal ' + goods_qrcode_active">
						<view class="goods-qrcode-body flex-col">
							<view class="flex-grow-1" style="position: relative">
								<view
									style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 100rpx 100rpx 60rpx">
									<view class="goods-qrcode-box">
										<view class="goods-qrcode-loading flex-x-center flex-y-center">
											<view class="flex-x-center flex-col">
												<image :src="__wxapp_img.system.loading2.url"
													style="width: 150rpx; height: 150rpx"></image>
												<view style="color: #888">海报生成中</view>
											</view>
										</view>
										<image @tap="goodsQrcodeClick"
											:class="'goods-qrcode ' + (goods_qrcode ? 'active' : '')"
											:data-src="goods_qrcode" mode="aspectFit" :src="goods_qrcode"></image>
									</view>
								</view>
							</view>
							<view class="flex-grow-0 flex-col flex-x-center" style="padding: 0 60rpx 80rpx">
								<view style="margin-bottom: 20rpx; padding: 0 40rpx">
									<button @tap="saveGoodsQrcode" style="background: #ff4544; color: #fff"
										v-if="goods_qrcode">保存图片</button>
									<button style="opacity: 0.4" v-else>保存图片</button>
								</view>
								<view style="color: #888; font-size: 9pt; text-align: center">保存至相册</view>
							</view>
							<view @tap="goodsQrcodeClose" class="goods-qrcode-close">
								<image :src="__wxapp_img.store.close2.url"
									style="width: 50rpx; height: 50rpx; display: block"></image>
							</view>
						</view>
					</view>
					<view class="bg-white mb-20" style="padding: 20rpx;" v-if="goods.attr && goods.attr.length > 0">
						<view>商品参数</view>
						<view class="flex parameter">
							<view v-for="(item,index) in goods.attr" :key="item.id" class="item" v-if="item.pid == 0">
								<view class="title">{{item.name}}：<text style="margin-right: 10px;" v-for="(item1,index1) in goods.attr" v-if="item.id==item1.pid">{{item1.name}} </text>	</view>
							</view>
						</view>
					</view>
					<view class="tab-group">
						<view class="flex-row tab-group-header">
							<view @tap="tabSwitch" :class="'flex-grow-1 flex-x-center tab-group-item ' + tab_detail"
								data-tab="detail">
								<text class="flex-y-center">商品详情</text>
							</view>
							<view @tap="tabSwitch" :class="'flex-grow-1 flex-x-center tab-group-item ' + tab_comment"
								data-tab="comment" v-if="__is_comment">
								<text class="flex-y-center">评价</text>
							</view>
						</view>
						<view class="tab-group-body">
							<view :class="'tab-group-item ' + tab_detail">
								<view class="goods-detail">
									<image  v-for="(item,index) in goods.detailImgList"
										:src="item"
										mode="widthFix" style="width: 100%;display: block;" @tap="previewImages(index)"></image>
								</view>
							</view>
							<view :class="'tab-group-item ' + tab_comment">
								<view class="comment-count flex-row">
									<view class="comment-count-item flex-grow-1 flex-x-center flex-col">
										<view>全部</view>
										<view>({{ comment_counts.all_count > 999 ? '999+' : comment_counts.all_count }})
										</view>
									</view>
									<view class="comment-count-item flex-grow-1 flex-x-center flex-col">
										<view>好评</view>
										<view>({{ comment_counts.good_count > 999 ? '999+' : comment_counts.good_count }})
										</view>
									</view>
									<view class="comment-count-item flex-grow-1 flex-x-center flex-col">
										<view>中评</view>
										<view>({{ comment_counts.normal_count > 999 ? '999+' : comment_counts.normal_count }})
										</view>
									</view>
									<view class="comment-count-item flex-grow-1 flex-x-center flex-col">
										<view>差评</view>
										<view>({{ comment_counts.bad_count > 999 ? '999+' : comment_counts.bad_count }})
										</view>
									</view>
								</view>
								<view class="comment-list">
									<view class="comment-item flex-row" v-for="(item, index) in comment_list"
										:key="item.id">
										<view class="flex-grow-0" style="overflow: visible">
											<image mode="aspectFill" :src="item.user.avatar"
												style="width: 70rpx; height: 70rpx; border-radius: 1000rpx"></image>
										</view>

										<view class="flex-grow-1">
											<view class="flex-row mb-20">
												<view class="flex-grow-1 flex-y-center nickname">{{ item.user.nickname }}
												</view>
												<view class="flex-grow-0 flex-y-center addtime">{{ item.createtime }}
												</view>
												
											</view>
											<view class="flex-grow-0 flex-y-center addtime" v-if="item.city">{{ item.city }}
											</view>
											<view class="mb-20">{{ item.content }}</view>
											<view class="pic-list" v-if="item.images && item.images.length > 0">
												<image @tap="commentPicView(index,pic_index)" class="pic-item" :data-index="index"
													:data-pic-index="pic_index" mode="aspectFill" :src="img"
													v-for="(img, pic_index) in item.images" ></image>
											</view>
											<view class="reply" v-if="item.reply_content">
												商家:
												<view class="reply-content">{{ item.reply_content }}</view>
											</view>
										</view>
									</view>
									<view class="" style="color: #999;text-align: center;margin: 15rpx;" v-if="!has_more">
										没有更多了~
									</view>	
								</view>
							</view>
						</view>
					</view>

				</view>
				<block>
				<!-- 	<view class="cart-nav" @tap="tocart">
						<image src="/static/images/nav-icon-cart.png"></image>
					</view> -->
					<!-- parse <include src="/components/goods/goods_buy"></include> -->
					<view class="flex-row bar-bottom" v-if="__user_info.blacklist !== 1">
						<view class="flex-grow-0 flex-row">
							<navigator class="flex-grow-0 flex-y-center bar-bottom-btn" openType="redirect"
								:url="'/mch/shop/shop?mch_id=' + goods.mch.id" v-if="pageType === 'STORE' && goods.mch">
								<view>
									<image :src="__wxapp_img.store.store.url"></image>
									<text>店铺</text>
								</view>
							</navigator>
							<view @tap="goHome" class="flex-grow-0 flex-y-center bar-bottom-btn">
								<view>
									<image src="/static/images/icon-store.png"></image>
									<text>首页</text>
								</view>
							</view>
							<block v-if="pageType === 'STORE'">
								<view @tap="favoriteAdd" class="flex-grow-0 flex-y-center bar-bottom-btn"
									v-if="goods.is_favorite && goods.is_favorite == 1">
									<view>
										<image src="/static/images/icon-favorite-active.png"></image>
										<text>已收藏</text>
									</view>
								</view>
								<view @tap="favoriteAdd" class="flex-grow-0 flex-y-center bar-bottom-btn" v-else>
									<view>
										<image src="/static/images/icon-favorite.png"></image>
										<text>收藏</text>
									</view>
								</view>
							</block>
						</view>
						<block v-if="pageType === 'STORE'">
							<view class="flex-grow-1 flex-row" >
								
								<view @tap="buyNow" class="flex-grow-1 flex-y-center flex-x-center buy-now">立即兑换</view>
							</view>
						</block>
					</view>
				</block>
				<!-- parse <include src="/components/common/get-coupon.wxml"></include> -->
				<view class="get-coupon flex-y-center flex-x-center"
					v-if="get_coupon_list && get_coupon_list.length > 0">
					<view class="get-coupon-box" style="overflow: visible">
						<image class="get-coupon-bg" mode="widthFix" :src="clone__wxapp_img.coupon.bg.url"></image>
						<view class="flex-x-center mb-20">
							<image
								:src="get_coupon_list[0].type == 2 ? '/images/icon-receive-coupon.png' : '/images/img-get-coupon-title.png'"
								style="width: 226rpx; height: 51rpx"></image>
						</view>
						<scroll-view class="coupon-list" :scrollY="true">
							<view class="coupon-item flex-y-center" v-for="(item, index) in get_coupon_list"
								:key="index">
								<image mode="widthFix" :src="clone__wxapp_img.coupon.item_bg.url"
									style="width: 100%; height: 100%"></image>

								<view style="width: 100%">
									<view class="flex-row flex-y-center">
										<view class="flex-grow-1 flex-row flex-y-bottom">
											<view style="line-height: 1">￥</view>
											<view style="font-size: 23pt; line-height: 0.85">{{ item.sub_price }}</view>
										</view>
										<view class="flex-grow-0" style="font-size: 9pt; line-height: 32rpx">
											满{{ item.min_price }}元可用</view>
									</view>
									<view @tap="hideGetCoupon" class="use-now" :data-url="item.url">立即使用</view>
									<view style="font-size: 9pt">{{ item.desc }}</view>
								</view>
							</view>
						</scroll-view>
						<view class="flex-x-center">
							<image @tap="closeCouponBox" :src="clone__wxapp_img.store.close3.url"
								style="width: 100rpx; height: 100rpx"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择规格弹窗 -->
		<view :class="'attr-picker ' + (showattr ? 'show' : 'hide')">
			<view class="content-box">
				<view class="flex-row" style="padding: 24rpx 28rpx">
					<view class="flex-grow-0">
						<view class="goods-pic-box">
							<image mode="aspectFill" :src="spec && spec.image ? spec.image : product.image"
								:data-url="spec && spec.image ? spec.image : product.image" @tap="clickImg"></image>
						</view>
					</view>
					<view class="flex-grow-1" style="padding: 0 24rpx">
						<view style="color: #cc3433; margin-bottom: 12rpx; font-weight: bold; font-size: 1rem">
							{{ spec ? spec.score : product.score }}{{money_name}}</view>
						<view style="color: #cc3433">
							{{ spec ? spec.product_sku_text : '' }}
						</view>
					</view>
					<view class="flex-grow-0">
						<view @tap="hideAttrPicker" class="flex-x-center flex-y-center"
							style="width: 100rpx; height: 100rpx">
							<image src="/static/images/icon-close.png" style="width: 30rpx; height: 30rpx"></image>
						</view>
					</view>
				</view>
				<scroll-view :scrollY="true" style="max-height: 650rpx">
					<view style="padding: 24rpx 28rpx">
						<view v-for="(item, index) in sku" >
							<view class="attr-group">
								<view class="attr-group-name">{{ item.name }}</view>
								<view class="attr-list">
									<text @tap="attrClick(index,i,$event)" :class="'attr-item ' + (v.check ? 'active' : '')"
										v-for="(v, i) in item.child" >
										{{ v.name }}
									</text>
								</view>
							</view>
						</view>
						<view style="height: 0; border-bottom: 1rpx solid #e3e3e3; margin-bottom: 40rpx"></view>
						<view style="padding-bottom: 40rpx">
							<view class="flex-row flex-y-center mb-20">
								<view class="flex-grow-1">数量</view>
								<view class="flex-grow-0">
									<view class="flex-row number-input-box">
										<view @tap="numberSub"
											class="flex-grow-0 flex-x-center flex-y-center number-btn number-sub">-
										</view>
										<view class="flex-grow-0">
											<input @blur="numberBlur" class="flex-grow-1 number-input" min="1" step="1"
												type="number" :disabled="true" :value="number" />
										</view>
										<view @tap="numberAdd"
											class="flex-grow-0 flex-x-center flex-y-center number-btn number-add">+
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			
			</view>
		</view>
	</view>
</template>

<script>
	import {Index} from '../../../apirequest/index-model.js';
	var i = new Index();
	import {Cart} from '../../../apirequest/cart-model.js';
	var c = new Cart();
	export default {
		data() {
			return {
				money_name:this.globalData.money_name,
				parameter:[], //属性
				autoplay: true,
				pageType: 'STORE',
				hide: 'hide',
				show: false,
				show_attr_picker: false,
				__is_comment: 1,
				__is_member_price: 0,
				__is_sales: 1,
				__is_share_price: 1,
				goods: {},
				share_modal_active: '',
				no_scroll: false,
				tab_comment: '',
				tab_detail: 'active',
				comment_count: {
					score_1: 0,
					score_2: 0,
					score_3: 0,
					score_all: 0
				},
				comment_list: [],
				page:1,
				has_more:true,
				url :'',
				comment_counts:[],
				sku:[],
				skuprice:[],
				spec:'',
				rule:[],
				showattr: false,
				number: 1,
				is_buy:false,
				qrcode:'',
				id:0,
			}
		},
		onLoad(options) {
			if(options.id){
				this.id = options.id
			}
			if(options.uid){
				uni.setStorageSync('pid',options.uid)
			}
			if(options.scene){
				 var options = decodeURIComponent(options.scene)
				 var arr = options.split('&');
				 this.id = arr[0].split('=')[1]
				 uni.setStorageSync('pid',arr[1].split('=')[1])
				 
			}
			this._index();
			this._getCommentList();
		},
		onReachBottom() {
			if(this.tab_comment == 'active'){
				this._getCommentList();
			}
			
		},
		onShareAppMessage() {
			var user = wx.getStorageSync('userinfo');
			var product = this.goods
			return {
			  title:product.name,
			  path: '/pages/goodsdetails/goodsdetails?id='+product.id+'&uid=' + user['id'],
			  imageUrl:product.image
			}
		},
		onShareTimeline() {
			  var user = wx.getStorageSync('userinfo');
			 var product = this.goods
			    return {
			      title: product.name,
			      query: 'id='+product.id+'&uid=' + user['id'],
				  imageUrl:product.image
			    }
		},
		methods: {
			_index(){
				var that = this;
				i.get_product_detail({id:this.id},(res) => {
					if(res.code == 1){
						that.goods = res.data
						that.skuprice = res.data.skuprice
						that.sku = res.data.sku
						var rule = [];
										
						that.spec=false
						if(that.skuprice.length){
							that.skuprice.forEach((e,i) => {
								if(e.status == 1 && !that.spec){
									that.spec=e
									rule = e.product_sku_text.split('&')
								}
							})
						}else{
							that.spec=false
						} 
						if(that.spec && that.spec.buy_start_qty> 0){
							that.number = that.spec.buy_start_qty
						}
						that.rule = rule
						
						var sku = [];
						if (that.sku) {
							var i = 0;
							that.sku.forEach(function(v, k) {
								if(v.pid == 0){
									sku[i] = v;
									sku[i]['child'] = [];
									that.sku.forEach((v2,i2) => {
										if(v2.pid == v.id){
											sku[i]['child'].push(v2)
										}
									})
									if(sku[i]['child'].length > 0){
										sku[i]['child'].forEach((v3,k3) => {
											if(that.rule[i] == v3.name){
												sku[i]['child'][k3].check = true
											}
										})
									}
									i++;
								}
								
							});
						}
						that.sku = sku;
						
					}else{
						uni.showToast({
							title:'产品已下架',
							icon:'none'
						})
					}
				})
				i.get_comment_counts({id:this.id},(res) => {
					if(res.code == 1){
						that.comment_counts = res.data
					}
				})
			},
			_getCommentList(){
				var that = this;
				if(!this.has_more){
					return false;
				}
				var page = this.page;
				i.get_comment_list({id:this.id,page:page},(res) => {
					if(res.code == 1){
						that.comment_list = that.comment_list.concat(res.data.data)
						that.has_more = res.data.has_more
						that.page= page+1;
					}
				})
			},
			tocart(){
				uni.switchTab({
					url:"/pages2/shop/cart/cart"
				})
			},
			numberAdd: function() {
				var that = this;
				var number = that.number;
				number++;
				var product = this.product;
				var spec = this.spec;
				if ((spec && number > spec.stock) || (!spec && number > product.inventory)) {
					uni.showToast({
						title: '超出库存了哦',
						icon: 'none'
					});
					return false;
				}
				that.number = number
			
			},
			
			numberSub: function() {
				var that = this;
				var number = that.number;
				number--;
				if(this.spec && this.spec.buy_start_qty > 0){
					if(number <  this.spec.buy_start_qty){
						uni.showToast({
							title: '该规格产品起购数量为'+this.spec.buy_start_qty,
							icon: 'none'
						});
						return;
					}
				}
				if (number == 0) {
					uni.showToast({
						title: '不能再减了哦~~',
						icon: 'none'
					});
					return;
				}
				that.number = number
			
			},
			
			attrClick: function(i1,i2,e) {
				var sku = this.sku;
				var skuprice = this.skuprice;
				var spec = [];
				var is_disabled = false;
				var rule = this.rule;
				var rules = [];
				rule.forEach((v,k) => {
					if(k == i1){
						rules[k] = sku[i1].child[i2].name;
					}else{
						rules[k] = v;
					}
				})
					
				skuprice.forEach(function(v, k) {
					var text = rules.join('&');
					if (text == v.product_sku_text) {
						spec = v;
						if(v.status == 0){
							is_disabled = true;
						}
					}
				});
				if(is_disabled){
					uni.showToast({
						title:'该规格产品暂时缺货',
						icon:'none'
					})
				}else{
					sku[i1].child.forEach(function(v, k) {
						sku[i1].child[k].check = false;
					});
					sku[i1].child[i2].check = true;
			
					this.sku = sku
					this.rule = rules
					this.spec = spec
				
				}
					
			},
			
			hideAttrPicker: function() {
				this.showattr = false
				this.is_buy = false
			},
			buyNow(){
				if(!uni.getStorageSync('userinfo')){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url:"/pages/login/login"
						})
					})
					return false;
				}
				if(this.is_buy){
					var sid = 0;
					var stock = this.goods.inventory
					if(this.spec){
						sid = this.spec.id
						stock = this.spec.stock;
					}
					if(this.number > stock){
						uni.showToast({
							title: '该规格产品库存不足',
							icon: 'none'
						});
						return false;
						
					}
					if(this.spec && this.spec.buy_start_qty > 0){
						if(this.number <  this.spec.buy_start_qty){
							uni.showToast({
								title: '该规格产品起购数量为'+this.spec.buy_start_qty,
								icon: 'none'
							});
							return false;
						}
					}
					c.add_cart({pid:this.id,n:this.number,sid:sid,type:2},(res) => {
						if(res.code == 1){
						
							this.showattr = false
							this.is_buy = false
							uni.navigateTo({
								url:"/pages2/shop/order-submit/order-submit?type=score&cart_ids="+res.data
							})
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				
				}else{
					this.showattr = true
					this.is_buy = true
				}
			},
			addCart(){
				if(!uni.getStorageSync('userinfo')){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url:"/pages/login/login"
						})
					})
					return false;
				}
				if(this.is_buy){
					if(this.spec && this.spec.buy_start_qty > 0){
						if(this.number <  this.spec.buy_start_qty){
							uni.showToast({
								title: '该规格产品起购数量为'+this.spec.buy_start_qty,
								icon: 'none'
							});
							return false;
						}
					}
					var sid = 0;
					var stock = this.goods.inventory
					if(this.spec){
						sid = this.spec.id
						stock = this.spec.stock;
					}
					if(this.number > stock){
						uni.showToast({
							title: '该规格产品库存不足',
							icon: 'none'
						});
						return false;
						
					}
					c.add_cart({pid:this.id,n:this.number,sid:sid},(res) => {
						if(res.code == 1){
							uni.showToast({
								title:res.msg,
						
							})
							this.showattr = false
							this.is_buy = false
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}else{
					this.showattr = true
					this.is_buy = true
				}
			},
			//视频播放
			play: function(e) {
				var t = this.currentPage, i = e.target.dataset.url;
				this.url = i;
				this.hide = ''
				this.show = !0
				uni.createVideoContext("video").play();
			},
			//视频暂停
			close: function(e) {
				var t = this.currentPage;
				if ("video" == e.target.id) return !0;
				this.hide = 'hide'
				this.show = !1
				uni.createVideoContext("video").pause();
			},
		   // 图片预览
			previewImages(index) {
				// 拿到图片的地址url
				let images = this.goods.detailImgList
				// 微信预览图片的方法
				uni.previewImage({
					current: images[index], // 图片的地址url
					urls: images // 预览的地址url
				})
			},
			//评论图片预览
			commentPicView(inx,index) {
				// 拿到图片的地址url
				let images = this.comment_list[inx].images
				// 微信预览图片的方法
				uni.previewImage({
					current: images[index], // 图片的地址url
					urls: images // 预览的地址url
				})
			},
			
			showShareModal: function() {
				var that = this
				that.share_modal_active = 'active'
				that.no_scroll = true
			},
			shareModalClose: function() {
				var that = this
				that.share_modal_active = ''
				that.no_scroll = false
			},
			tabSwitch: function(t) {
				if ('detail' == t.currentTarget.dataset.tab) {
					this.tab_detail = "active"
					this.tab_comment = ''
				} else {
					this.tab_detail = ""
					this.tab_comment = 'active'
				}
			},
			showAttrPicker: function() {
				this.showattr = true
				this.is_buy = true
			},
			previewImage: function(t) {
				var a = t.currentTarget.dataset.url;
				uni.previewImage({
					urls: [a]
				});
			},
			favoriteAdd(){
				var that = this;
				c.collect({id:this.id},(res) => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						if(res.data == 1){
							var goods = that.goods
							goods.is_favorite = 1
							that.goods = goods
						}else{
							var goods = that.goods
							goods.is_favorite = 0
							that.goods = goods
						}
					}
				})
			},
			goHome: function() {
				uni.switchTab({
					url: '/pages/shop/index/index'
				})
			},
			//生成海报
			getGoodsQrcode(){
				var that = this;
				//获取二维码
				c.qrcode({id:this.id},(res) => {
					if(res.code == 1){
						that.qrcode = res.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style>
	view {
		overflow: visible;
	}

	.no-scroll {
		height: 100%;
		overflow-y: hidden;
	}

	.goods-detail {
		box-sizing: border-box;
		padding: 24rpx 0;
		background: #fff;
	}

	.goods-detail text,
	.goods-detail image,
	.goods-detail view {
		box-sizing: border-box;
		max-width: 100%;
	}

	.tab-group .tab-group-header {
		background: #fff;
		border-bottom: 1rpx solid #e3e3e3;
	}

	.tab-group .tab-group-header .tab-group-item text {
		height: 100rpx;
		border-bottom: 2rpx solid transparent;
	}

	.tab-group .tab-group-header .tab-group-item.active text {
		color: #ff4544;
		border-bottom-color: #ff4544;
	}

	.tab-group .tab-group-body .tab-group-item {
		display: none;
	}

	.tab-group .tab-group-body .tab-group-item.active {
		display: block;
	}

	.comment-count {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.comment-count .comment-count-item {
		text-align: center;
		padding: 20rpx 0;
		font-size: 9pt;
	}

	.comment-item {
		background: #fff;
		border-bottom: 1rpx solid #e3e3e3;
		padding: 32rpx 24rpx;
	}

	.comment-item .nickname {
		padding-left: 24rpx;
		height: 70rpx;
		font-weight: bolder;
	}

	.comment-item .addtime {
		color: #888;
	}

	.comment-item .pic-list {
		margin-left: -8rpx;
		margin-top: -8rpx;
	}

	.comment-item .pic-item {
		width: 200rpx;
		height: 200rpx;
		margin-left: 8rpx;
		margin-top: 8rpx;
		display: inline-block;
	}

	.reply {
		margin: 20rpx 24rpx 20rpx 0rpx;
		border-radius: 16rpx;
		background: #f7f7f7;
		font-size: 11pt;
		padding: 22rpx 30rpx;
		color: #ff4544;
	}

	.reply-content {
		display: inline;
		color: #666666;
	}

	.comment-item .score-tag {
		display: inline-block;
		background: #eee;
		font-size: 9pt;
		padding: 4rpx 12rpx;
		border-radius: 5rpx;
	}

	.hide {
		display: none;
	}

	.rule-pop {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		top: 0;
		left: 0;
		z-index: 999;
	}

	.rule-pop .box {
		background: #fff;
		border-radius: 10rpx;
		width: 75%;
		padding: 20rpx;
	}

	.rule-pop .box .title {
		font-size: 1rem;
		margin: 20rpx 0;
		text-align: center;
		font-weight: 700;
	}

	.rule-pop .box .text {
		line-height: 40rpx;
		color: #333;
		font-size: 0.85rem;
	}

	.rule-pop .box .closeicon {
		margin-bottom: -111rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.goods-image-swiper {
		height: 750rpx;
		position: relative;
	}

	.goods-image-swiper image {
		height: 750rpx;
	}

	.goods-image {
		width: 100%;
		height: 100%;
	}

	.share_commission {
		height: 80rpx;
		width: 220rpx;
		position: absolute;
		right: 0;
		bottom: 80rpx;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.share_commission .img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
		margin-left: 20rpx;
	}

	.share_commission .text_box {
		font-size: 7pt;
		color: #fff;
	}

	.share_commission .text2 {
		font-weight: bold;
	}

	.goods-image-swiper .play {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: 275rpx;
		left: 300rpx;
	}

	.bar-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		box-shadow: 0 0 3rpx rgba(0, 0, 0, 0.2);
		height: 110rpx;
	}

	.bar-bottom-btn {
		border: none;
		background: #fff;
		font-size: 0;
		line-height: normal;
		padding: 0;
		margin: 0;
		box-shadow: none;
		border-radius: 0;
		position: inherit;
		border-left: 1rpx solid #e3e3e3;
		width: 110rpx;
	}

	.bar-bottom-btn:after {
		display: none;
	}

	.bar-bottom-btn:first-child {
		border-left: none;
	}

	.bar-bottom-btn.button-hover {
		background: rgba(255, 255, 255, 0.85);
	}

	.bar-bottom-btn view {
		text-align: center;
		width: 100%;
	}

	.bar-bottom-btn image {
		width: 38rpx;
		height: 38rpx;
		margin-bottom: 0rpx;
	}

	.bar-bottom-btn text {
		font-size: 8pt;
		color: #888;
		display: block;
	}

	.bar-bottom .add-cart {
		background: #f39800;
		color: #fff;
	}

	.bar-bottom .buy-now {
		background: #ff4544;
		color: #fff;
	}

	._negotiable {
		height: 100%;
		width: 100%;
		background: none !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		line-height: inherit !important;
		font-family: inherit !important;
		color: inherit !important;
	}

	._negotiable:before,
	._negotiable:after {
		border-radius: 0 !important;
		border: none !important;
	}

	.goods_info_box {
		background: #fff;
		padding: 32rpx 24rpx;
		border-bottom: 1rpx solid #eee;
	}

	.goods_info_box .goods_name {
		font-weight: bold;
		margin-bottom: 24rpx;
		line-height: 1.7;
	}

	.quick_goods_info {
		height: 105rpx;
	}

	.quick_goods_info .view1 {
		float: left;
	}

	.quick_goods_info .view1 .renminbi {
		font-size: 11pt;
		color: #ff4544;
	}

	.quick_goods_info .view1 .img {
		width: 94rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}

	.quick_goods_info .view1 .is_member {
		color: red;
	}

	.quick_goods_info .view2 {
		margin-right: 32rpx;
	}

	.quick_goods_info .view3 .sales {
		font-size: 9pt;
		color: #888;
	}

	.quick_goods_info .view3 .sales_title {
		font-size: 9pt;
		color: #888;
	}

	.quick_goods_info .good_num {
		width: 80rpx;
		text-align: center;
	}

	.quick_goods_info .goods_price {
		font-size: 16px;
		color: #ff4544;
	}

	.quick_goods_info .original_price {
		font-size: 9pt;
		color: #888;
		text-decoration: line-through;
	}

	.quick_goods_info .add {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 28rpx;
		background: #ff4544;
		color: #fff;
		font-size: 13px;
		float: right;
		margin-top: 20rpx;
	}

	.quick_goods_info .xuanguige {
		width: 142rpx;
		height: 50rpx;
	}

	.quick_goods_info .add_cart {
		width: 192rpx;
		height: 56rpx;
	}

	.quick_goods_info .guigenum {
		position: absolute;
		width: 35rpx;
		height: 25rpx;
		border-radius: 40%;
		border: 1rpx solid red;
		color: red;
		background: #fff;
		font-size: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 70rpx;
		margin-top: -46rpx;
	}

	.quick_goods_info .btn_car_num {
		height: 100%;
		float: right;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 32rpx;
	}

	.quick_goods_info .btn_car_num .carStandard {
		border-radius: 100%;
		height: 44rpx;
		float: right;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.quick_goods_info .member_price_box {
		font-size: 9pt;
		color: #ff4544;
		text-decoration: none;
		height: 100%;
	}

	.quick_goods_info .member_price_title {
		background-color: #feeeee;
		margin-right: 16rpx;
	}

	.store_goods_info .view1 {
		margin-right: 32rpx;
	}

	.store_goods_info .view1 .renminbi {
		font-size: 9pt;
		padding-top: 18rpx;
		color: #ff4544;
	}

	.store_goods_info .view1 .min_price {
		font-size: 16pt;
		color: #ff4544;
	}

	.store_goods_info .view1 .is_member {
		color: red;
	}

	.store_goods_info .view1 .img {
		width: 94rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}

	.store_goods_info .view2 {
		margin-right: 32rpx;
	}

	.store_goods_info .original_price {
		font-size: 9pt;
		color: #888;
		text-decoration: line-through;
	}

	.store_goods_info .member_price_box {
		font-size: 9pt;
		color: #ff4544;
		text-decoration: none;
		height: 100%;
	}

	.store_goods_info .member_price_title {
		background-color: #feeeee;
		margin-right: 16rpx;
	}

	.store_goods_info .sales {
		font-size: 9pt;
		color: #888;
	}

	.store_goods_info .share_btn {
		line-height: normal;
		padding: 0 10rpx;
		border: none;
		background: none;
		border-radius: 0;
		box-shadow: none;
		display: inline-block;
		font-size: 8pt;
	}

	.store_goods_info .share_btn .img {
		width: 40rpx;
		height: 40rpx;
	}

	.store_goods_info .share_btn .share {
		color: #888;
	}

	.check-list {
		padding: 32rpx 24rpx 12rpx 24rpx;
		flex-wrap: wrap;
	}

	.check-item {
		margin-right: 32rpx;
		font-size: 9pt;
		margin-bottom: 20rpx;
	}

	.check-item image {
		width: 34rpx;
		height: 34rpx;
		margin-right: 8rpx;
	}

	.select_attrs {
		background: #fff;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
		height: 100rpx;
	}

	.select_attrs .attrs {
		margin-left: 40rpx;
		font-size: 9pt;
		color: #888;
	}

	.select_attrs .img {
		width: 16rpx;
		height: 26rpx;
	}

	.original-price {
		font-size: 8pt;
		color: #707070;
	}

	.group-descount {
		font-size: 7pt;
	}

	.group-descount-one {
		padding: 5rpx 12rpx;
		background-color: #feeeee;
	}

	.group-descount-center {
		width: 6rpx;
	}

	.group-descount-tow {
		padding: 5rpx 12rpx;
		background-color: #feeeee;
	}

	.mch_shop {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 24rpx;
	}

	.mch_shop .img_box {
		padding-right: 24rpx;
	}

	.mch_shop .img_box .logo {
		width: 80rpx;
		height: 80rpx;
		border: 1rpx solid #eee;
	}

	.mch_shop .name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mch_shop .shop_info {
		font-size: 9pt;
		color: #888;
	}

	.mch_shop .goods_num {
		margin-right: 30rpx;
	}

	.mch_shop .enter_shop {
		border: 1rpx solid #e3e3e3;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		font-size: 9pt;
		color: #888;
		display: inline-block;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 1);
		z-index: 9999;
	}

	.modal video {
		width: 100%;
		height: 430rpx;
	}

	.share-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 1000;
		transform: translateY(100%);
		transition: background 250ms;
	}

	.share-modal .share-modal-body {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #f2f2f2;
		padding-top: 60rpx;
		transform: translateY(100%);
		transition: transform 250ms;
	}

	.share-modal.active {
		transform: translateY(0);
		background: rgba(0, 0, 0, 0.5);
	}

	.share-modal.active .share-modal-body {
		transform: translateY(0);
	}

	.share-modal .share-bottom {
		text-align: center;
		font-size: 9pt;
		margin: 0;
		padding: 0;
		margin-bottom: 60rpx;
		line-height: inherit;
		border: none;
		background: none;
		color: inherit;
		font-family: inherit;
		display: inline-block;
	}

	.share-modal .share-bottom:after {
		display: none;
	}

	.share-modal .share-bottom image {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 12rpx;
		border-radius: 999rpx;
		border: 1rpx solid #eee;
	}

	.share-modal .share-bottom:active image {
		opacity: 0.7;
	}

	.share-modal .share-modal-close {
		background: #fff;
		height: 100rpx;
		border-top: 1rpx solid #eee;
	}

	.goods-qrcode-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.5);
		padding: 40rpx;
		transform: translateY(100%);
		opacity: 0.5;
		transition: opacity 250ms;
		visibility: hidden;
	}

	.goods-qrcode-body {
		background: #fff;
		height: 100%;
		border-radius: 10rpx;
	}

	.goods-qrcode-modal.active {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.goods-qrcode-modal .goods-qrcode-box {
		height: 100%;
		position: relative;
		box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.15);
	}

	.goods-qrcode-modal .goods-qrcode-loading {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.goods-qrcode-modal .goods-qrcode {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
		display: none;
	}

	.goods-qrcode-modal .goods-qrcode.active {
		display: block;
	}

	.goods-qrcode-modal .goods-qrcode-close {
		position: absolute;
		top: 40rpx;
		right: 40rpx;
		padding: 15rpx;
	}

	.hide {
		display: none;
	}

	.step-icon {
		height: 44rpx;
		width: 44rpx;
		margin-right: 16rpx;
	}

	.attr-picker {
		position: fixed;
		bottom: 110rpx;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.attr-picker .content-box {
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 110rpx;
	}

	.attr-picker .attr-group {
		margin-bottom: 6rpx;
	}

	.attr-picker .attr-group-name {
		margin-bottom: 20rpx;
	}

	.attr-picker .attr-item {
		display: inline-block;
		margin: 0 30rpx 30rpx 0;
		background: #f7f7f7;
		border-radius: 10rpx;
		padding: 15rpx 30rpx;
	}

	.attr-picker .attr-item.active {
		background: #ff4544;
		color: #fff;
	}

	.attr-picker .goods-pic-box {
		position: relative;
		width: 200rpx;
	}

	.attr-picker .goods-pic-box image {
		position: absolute;
		top: -90rpx;
		border: 5rpx solid #fff;
		width: 200rpx;
		height: 200rpx;
		border-radius: 5rpx;
		box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	.attr-picker .attr_num_0 {
		color: #c5c5c5;
	}

	.attr-picker .number-input-box {
		height: 70rpx;
	}

	.attr-picker .number-input-box .number-input {
		height: 70rpx !important;
		border: none;
		text-align: center;
		width: 120rpx;
		background: #eee;
		margin: 0 4rpx !important;
	}

	.attr-picker .number-input-box .number-btn {
		height: 100% !important;
		width: 70rpx;
		background: #eee;
	}

	.attr-picker .number-input-box .number-btn.disabled {
		background: #f6f6f6;
		color: #aaa;
	}

	.attr-picker .is_member_price {
		font-size: 7pt;
	}

	.cart-nav {
		position: fixed;
		top: 180rpx;
		right: 24rpx;
		background: rgba(255, 255, 255, 0.5);
		font-size: 0;
		padding: 20rpx;
		border-radius: 999rpx;
		box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
		z-index: 100;
	}

	.cart-nav image {
		width: 42rpx;
		height: 42rpx;
	}
	.parameter{
		flex-wrap: wrap;
	}
	.parameter .item{
		width: 50%;
		font-size: 12px;
		color: #999;
		margin-top: 15rpx
	}
</style>
